<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>插槽参数</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
    <div id="应用"></div>
    <script>
        const {createApp: 创建, ref: 引用} = Vue 

        const 根组件 = {
            template: /*html*/ `
                <div>
                    <child-component>
                        <template #="{子组件数据, 子组件方法}">
                            <p>来自子组件数据: {{子组件数据}}</p>
                            <p>父组件按钮控件: <button @click="子组件方法">点击</button></p>
                        </template>
                    </child-component>
                </div> 
            `,
        }

        const 子组件 = {
            template: /*html*/ `
                <div>
                    <slot :子组件数据="子组件数据" :子组件方法="子组件方法"></slot>
                    <p>{{数据}}</p>
                </div>
            `,
            setup() {
                const 子组件数据 = '来自子组件的问候.'
                const 数据 = 引用('')

                const 子组件方法 = () => {
                    数据.value = '子组件按钮点击回调方法.'
                }

                return {子组件数据, 数据, 子组件方法}
            }
        }

        应用 = 创建(根组件)
        应用.component('child-component', 子组件)
        应用.mount('#应用')
    </script>
</body>
</html>